<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12盒子的轮廓和圆角</title>
    <style>
        .box1{
            width: 188px;
            height: 188px;
            
            background-color: #bfa;
            /* border: 12px solid red; */
            /* outline:12px solid red ; */
            border: 12px solid red;
            /* outline:12px solid blueviolet ; */
            /* 
            盒子的轮廓属性
                outline:用法和border一样
                        outline 不影响布局不影响盒子大小
                        border会影响布局，影响盒子大小
            
            
            */
            /* border-radius: 50px 30px; */
                /* border-radius:是使盒子圆角化
                            值是是圆角半径
                            半径是指整个盒子可见框的半径，
 
 
 
                */
            /* border-bottom-left-radius: 50px 100px; */
            border-radius: 100px;


            box-shadow:20px 20px 88px rgba(0 ,0,0,.4);




        }



    </style>
</head>
<body>
    <div class="box1">
        张勇就是个大帅比

    </div>
    <span>
        张勇就是个大帅比
    </span>
    
</body>
</html>